import React, { useEffect, useState } from "react";
// useEffect() 是个副作用函数
// useEffect用于在函数组件里面来做生命周期的

const getData = () => {
  return fetch("http://www.pudge.wang:3080/api/rated/list")
    .then((response) => response.json())
    .then((res) => {
      return res;
    });
};

const App = () => {
  const [count, setCount] = useState(1);
  const [name, setName] = useState("zhangsan");

  // 没有返回值的
  // 至少要传入一个回调函数

  // 如果只传一个回调函数，相当于componentDidMount和componentDidUpdate
  // useEffect(() => {
  //   console.log(123);
  // });

  // 第二个参数是一个依赖数组
  // 如果有第二个参数，并且是空数组，相当于是componentDidMount
  // useEffect(() => {
  //   console.log(123);
  // }, []);

  // 第二个参数如果有数组项，相当于componentDidMount和watch
  // useEffect(() => {
  //   console.log(123);
  // }, [count, name]);

  // 在第一个函数里面去return另一个函数，那么这个另一个函数就会在组件销毁时执行
  // 相当于componentWillUnmount
  // useEffect(() => {
  //   return () => {
  //     console.log("组件被卸载了");
  //   };
  // }, []);

  // 如果想同步拿到数据改变以后的值，需要配合useEffect
  const fn = () => {
    setCount((v) => v + 1);
  };
  // useEffect(() => {
  //   console.log(count);
  // }, [count]);

  const [list, setList] = useState([]);
  useEffect(() => {
    // 如果封装的函数还想使用async，需要转成自执行函数
    (async () => {
      const res = await getData();
      setList(res.result);
    })();
  }, []);

  return (
    <>
      <h2>useEffect</h2>
      <p>count: {count}</p>
      <button onClick={fn}>btn</button>
      <p>name: {name}</p>
      <button onClick={() => setName("lisi")}>btn</button>

      <ul>
        {list.map((item) => (
          <li key={item._id}>{item.title}</li>
        ))}
      </ul>
    </>
  );
};

const App2 = () => {
  const [show, setShow] = useState(true);

  return (
    <>
      <div>app2组件</div>
      <button onClick={() => setShow(false)}>隐藏app组件</button>
      {show && <App />}
    </>
  );
};

export default App2;
